<template>
  <div>
    <div class="wrap">
      <div class="login-title">毕业设计过程管理系统</div>
      <div class="login-user">
        <div class="rowspan">
          <el-input
            placeholder="请输入用户名"
            prefix-icon="iconfont icon-tubiao211"
            v-model="UserSignVO.account"
            @blur="userBlur"
          >
          </el-input>
          <i class="iconfont icon-duihaocheckmark17" v-if="this.mark1"></i>
        </div>
        <div class="rowspan">
          <el-input
            type="password"
            prefix-icon="iconfont icon-password"
            placeholder="请输入密码"
            v-model="UserSignVO.password"
            @blur="passwrodBlur"
          >
          </el-input>
          <i class="iconfont icon-duihaocheckmark17"  v-if="this.mark2"></i>
        </div>
        <div class="rowspan">
          <el-input
            type="password"
            prefix-icon="iconfont icon-password"
            placeholder="请再次输入密码"
            v-model="UserSignVO.repassword"
            @blur="repasswordBlur"
          >
          </el-input>
          <i class="iconfont icon-duihaocheckmark17" v-if="this.mark3"></i>
        </div>
        <div class="captcha">
          <el-input  class="el-input-captcha" v-model="UserSignVO.captcha" placeholder="请输入验证码"></el-input>
          <img src="" alt="" class="el-captcha">
        </div>
        <el-select class="el-input-select" v-model="UserSignVO.role" placeholder="请确认身份">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-row>
            <el-button type="success" @click="userSubmit">注册</el-button>
        </el-row>
        <router-link to="/">
          <i class="el-icon-back"></i>
        </router-link>
      </div>
    </div>
    <div class="registerAfter" v-if="mark">
      <div class="regSuccess">注册成功!</div>
      <router-link class="returnHome" tag="div" to="/">
        <i class="el-icon-back"></i>
        <div class="returnLogin">返回登录</div>
      </router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Register',
  data () {
    return {
      mark1: false,
      mark2: false,
      mark3: false,
      mark: false,
      UserSignVO: {
        account: '',
        password: '',
        repassword: '',
        captcha: '',
        role: ''
      },
      options: [{
        value: '选项1',
        label: '教师'
      },{
        value: '选项2',
        label: '学生'
      },{
        value: '选项3',
        label: '管理员'
      }]
    }
  },
  methods: {
    userBlur () {
      let value = this.UserSignVO.account.trim()
      if(value.length >= 6 && value.length <= 10 ){
        this.mark1 = true
      }else{
        this.mark1 = false
      }

    },
    passwrodBlur () {
      let value = this.UserSignVO.password.trim()
      if(value.length <= 40 && value > 0){
        this.mark2 = true
      }else{
        this.mark2 = false
      }
    },
    repasswordBlur () {
      let value = this.UserSignVO.repassword.trim()
      if(value === this.UserSignVO.password && value.length != 0){
        this.mark3 = true
      }else{
        this.mark3 = false
      }
    },
    userSubmit () {
      this.mark = true
      let UserSignVO = {
          account: this.UserSignVO.account,
          password: this.UserSignVO.password,
          captcha: this.UserSignVO.captcha,
          role: this.UserSignVO.role
      }
      // this.axios.post(
      //   '/user/sign-up',
      //   this.$qs.stringify(UserSignVO)
      //   )
      // .then( response => {
      //   console.log(response.data)
      // })
      // .catch( error => {
      //   console.log(error)
      // })
      this.axios.get('/api/student/1507084118/profile')
        .then(this.handle)

    },
    handle (msg) {
      console.log(msg)
    }
  }
}
</script>
<style lang='stylus' scoped>
  .el-input >>> .icon-tubiao211
    font-size: 18px
  .el-input >>> .icon-password
    font-size: 20px
  .registerAfter
    position: absolute
    top: 0
    left: 736px
    width: 450px
    height: 450px
    margin: 100px auto
    background: skyblue
    padding-top: 1px
    .regSuccess
      position: relative
      top:50%
      width: 100px
      height: 30px
      background: #fff
      margin: 0 auto
      margin-top: -15px
      text-align: center
      line-height: 30px
    .returnHome
      width: 70px
      margin-left: 10px
      color: #fff
      cursor: pointer
      .el-icon-back
        margin-left: 10px
        font-size: 20px
  .wrap
    position:relative
    width: 450px
    height: 450px
    margin: 100px auto
    background: #bbb
    padding-top: 1px
    .login-title
      width: 200px
      height: 30px
      text-align: center
      line-height: 30px
      margin: 30px auto
      font-size: 18px
      color: #fff
      font-weight: bold
      letter-spacing: 2px
    .login-user
      width: 250px
      margin: 10px auto
      .rowspan
        position relative
        .iconfont
          position: absolute
          top: 10px
          right: -30px
          color: #67C23A
          font-size: 18px
          font-weight: bold
      .el-input
        display: block
        width: 250px
        margin: 15px auto
      .el-button--success
        width:100%
        margin-top: 30px
      .captcha
        clear: both
        height: 40px
        margin-bottom: 15px
        .el-input-captcha
          float: left
          width: 120px
          margin: 0
        .el-captcha
          float: right
          width: 100px
          height: 40px
          border: 1px solid
      .el-input-select
        width: 120px
      .el-icon-back
        position: absolute
        top: 30px
        left: 20px
        color: #fff
        font-size: 25px
</style>
